<script setup>
import { ref, reactive } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { request } from "@/common/http";
import { ApiUrl } from "@/common/ApiUrl";
import { jumpPage, Toast } from "@/utils";

/* 设备信息 */
let machineInfo = ref({});
/* 代理商 */
let partnerUser = ref("");
/* 运营商 */
let merchantUser = ref("");
/* 场所列表 */
let areaList = reactive([]);
/* 场所名称 */
let area = ref("");
/* 是否显示机器类型弹窗 */
let showMachineType = ref(false);
/* 是否显示机器场所弹窗 */
let showAreaList = ref(false);
let machineTypeText = ref("");
/* 机器类型列表 */
let machineType = reactive([
	[
		{
			value: 0,
			text: "售货机"
		},
		{
			value: 1,
			text: "格子柜"
		},
		{
			value: 2,
			text: "售货机(蓝牙版)"
		},
		{
			value: 8,
			text: "咖啡机"
		},
		{
			value: 9,
			text: "借还柜"
		}
	]
])
/* 货道风格 */
let channelType = ref([
	{
		id: 1,
		name: "关闭购物车"
	},
	{
		id: 2,
		name: "开启购物车"
	}
])
/* 页面风格 */
let pageStyle = ref([
	{
		id: 1,
		name: "风格一"
	},
	{
		id: 2,
		name: "风格二"
	},
	{
		id: 3,
		name: "风格三"
	}
])

onLoad((params) => {
	handleGetMachineInfo(params.id);
})

onShow(() => {
	/* 获取场所列表 */
	handleGetAreaList();
})

/* 设备类型弹窗确定按钮点击事件 */
const handleMachineTypeConfirm = (e) => {
	const item = e.value[0];
	machineTypeText.value = item.text;
	machineInfo.value.machineType = item.value;
	showMachineType.value = false;
}

const handleAreaListConfirm = (e) => {
	const item = e.value[0];
	area.value = item.text;
	machineInfo.value.areaId = item.value;
	showAreaList.value = false;
}

/* 查询设备信息 */
const handleGetMachineInfo = (machineId) => {
	request({
		url: `${ApiUrl.editMachine}/${machineId}`
	}).then(res => {
		const data = res.data;
		machineType[0].map(item => {
			if (item.value == data.machineType) {
				machineTypeText.value = item.text;
			}
		})
		/* 获取运营商列表 */
		handleGetMachineUser(data.userId);
		/* 获取代理商列表 */
		handleGetFindPartnerList(data.partnerId);
		machineInfo.value = data;
		console.log("设备信息res", res)
	})
}

/* 获取代理商列表 */
const handleGetFindPartnerList = (partnerId) => {
	request({
		url: `${ApiUrl.MachineUrl}/findPartnerList`
	}).then(res => {
		const list = res.data;
		if (list.length > 0) {
			list.map(item => {
				if (item.value == partnerId) {
					partnerUser.value = item.label;
				}
			})
		}
	})
}
/* 获取运营商列表 */
const handleGetMachineUser = (merchantUserId) => {
	request({
		url: `${ApiUrl.MerchantUrl}/merchantList`,
		method: "post",
		data: {
			merchantUserId
		}
	}).then(res => {
		const list = res.data.data.list;
		if (list.length > 0) {
			merchantUser.value = list[0].userName;
		}
	})
}

/* 获取场所列表 */
const handleGetAreaList = (merchantUserId) => {
	request({
		url: `${ApiUrl.AreaUrl}/list`
	}).then(res => {
		console.log("area", res)
		let list = [];
		res.data.map(item => {
			list.push({
				value: item.id,
				text: item.name
			})
		})
		areaList = [list];
	})
}

</script>

<template>
	<view class="machine_manage">
		<view class="form">
			<view class="form_item">
				<view class="label label_gray">机器编号</view>
				<input v-model="machineInfo.machineNo" disabled placeholder-style="color: #B6BDBD;" />
			</view>
			<view class="form_item">
				<view class="label label_gray">代理商</view>
				<input v-model="partnerUser" disabled placeholder-style="color: #B6BDBD;" />
			</view>
			<view class="form_item">
				<view class="label label_gray">运营商</view>
				<input v-model="merchantUser" disabled placeholder-style="color: #B6BDBD;" />
			</view>
		</view>
		<view class="form">
			<view class="form_item">
				<view class="label">主板编号</view>
				<input v-model="machineInfo.boardNo" disabled placeholder-style="color: #B6BDBD;" />
			</view>
			<view class="form_item">
				<view class="label">商户编号</view>
				<view class="select">选择</view>
				<image class="icon_arrow_right" src="/static/image/form/right_arrow.png" mode="aspectFill" />
			</view>
			<view class="form_item" @click="showAreaList = true">
				<view class="label">机器场地</view>
				<view class="select">{{ area ? area : "选择" }}</view>
				<image class="icon_arrow_right" src="/static/image/form/right_arrow.png" mode="aspectFill" />
			</view>
			<view class="form_item" @click="showMachineType = true">
				<view class="label">机器类型</view>
				<view class="select">{{ machineTypeText ? machineTypeText : "选择"}}</view>
				<image class="icon_arrow_right" src="/static/image/form/right_arrow.png" mode="aspectFill" />
			</view>
			<view v-if="machineInfo.machineType == 1" class="form_item">
				<view class="label">押金</view>
				<input placeholder="请输入押金" placeholder-style="color: #B6BDBD;" />
			</view>
			<view class="form_item">
				<view class="label">机器二维码</view>
				<view class="select">选择</view>
				<image class="icon_arrow_right" src="/static/image/form/right_arrow.png" mode="aspectFill" />
			</view>
		</view>
		<view class="form form1">
			<view class="form_item">
				<view class="label">运营状态</view>
				<switch color="#EE7161" :checked="machineInfo.status == 1" @change="handleChecked1" />
			</view>
			<view class="form_item">
				<view class="label">PLC控制</view>
				<switch color="#EE7161" :checked="machineInfo.isplc == 1" @change="handleChecked1" />
			</view>
			<view class="form_item">
				<view class="label">是否重新出货</view>
				<switch color="#EE7161" :checked="machineInfo.retry == 1" @change="handleChecked1" />
			</view>
			<view class="form_item">
				<view class="label">自动退款</view>
				<switch color="#EE7161" :checked="machineInfo.autoRefund == 1" @change="handleChecked1" />
			</view>
			<view class="form_item">
				<view class="label">安卓屏</view>
				<switch color="#EE7161" :checked="machineInfo.type == 1" @change="handleChecked1" />
			</view>
			<view class="form_item">
				<view class="label" style="width: 150rpx;">客服电话</view>
				<input v-model="machineInfo.servicePhone" placeholder="请输入客服电话" placeholder-style="color: #B6BDBD;" />
			</view>
      <view class="form_item">
				<view class="label" style="width: 150rpx;">购物车数量</view>
				<input v-model="machineInfo.channelType" placeholder="请输入购物车数量" placeholder-style="color: #B6BDBD;" />
			</view>
		</view>
		<view class="title">页面风格（旧主板选一或者二，新主板选择三）</view>
		<view class="form">
			<view class="form_item" v-for="item in pageStyle" :key="item.id" @click="machineInfo.style = item.id">
				<view class="label">{{ item.name }}</view>
				<image v-if="item.id == machineInfo.style" class="check" src="/static/image/form/check.png" mode="widthFix"/>
			</view>
		</view>
<!--		<view class="title">货道风格</view>
		<view class="form">
			<view class="form_item" v-for="item in channelType" :key="item.id" @click="machineInfo.channelType = item.id">
				<view class="label">{{ item.name }}</view>
				<image v-if="item.id == machineInfo.channelType" class="check" src="/static/image/form/check.png" mode="widthFix"/>
			</view>
		</view>-->
		<view class="btn_save">保存</view>
		<!-- 机器类型弹窗 -->
		<u-picker
			:show="showMachineType"
			:columns="machineType"
			@cancel="showMachineType = false"
			@confirm="handleMachineTypeConfirm" />
		<!-- 场所列表 -->
		<u-picker
			:show="showAreaList"
			:columns="areaList"
			@cancel="showAreaList = false"
			@confirm="handleAreaListConfirm" />
	</view>
</template>

<style lang="scss">
.machine_manage {
	padding-bottom: 120rpx;
	.form {
		width: 100%;
		background: #fff;
		margin-bottom: 20rpx;
		&.form1 {
			.form_item {
				.label {
					width: unset;
				}
			}
		}
		.form_item {
			width: 670rpx;
			height: 96rpx;
			background: #FFFFFF;
			margin: 0 auto;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.label {
				width: 150rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #3B3D3D;
				&.label_gray {
					color: #B6BDBD;
				}
			}
			input {
				flex: 1;
				outline: none;
				background: none;
				border-radius: none;
				border: none;
				font-size: 28rpx;
				color: #3B3D3D;
			}
			.select {
				flex: 1;
				font-size: 28rpx;
				color: #B6BDBD;
				text-align: right;
			}
			.icon_arrow_right {
				width: 32rpx;
				height: 32rpx;
				margin-left: 12rpx;
			}
			.check {
				width: 48rpx;
				height: 48rpx;
				margin-right: 34rpx;
			}
		}
	}
	.title {
		font-size: 28rpx;
		line-height: 33rpx;
		color: #969699;
		padding: 4rpx 32rpx 24rpx;
	}
	.btn_save {
		width: 686rpx;
		height: 80rpx;
		background: linear-gradient( 90deg, #FF766C 0%, #FF4638 100%);
		border-radius: 40rpx;
		font-size: 28rpx;
		line-height: 33rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 74rpx auto 0;
	}
}
</style>